<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_promise使用</title>
</head>
<body>
    
</body>
<script>
    //先看一段"回调地狱"代码,可以说是很糟糕了.
    //利用 setTimeOut 函数模拟网络请求
    // setTimeout(()=>{
    //     //利用打印多行代码模拟网络请求到数据后进行逻辑处理
    //     console.log("hello world...");
    //     console.log("hello world...");
    //     console.log("hello world...");

    //     setTimeout(()=>{
    //         console.log("hello js...");
    //         console.log("hello js...");
    //         console.log("hello js...");

    //         setTimeout(()=>{
    //             console.log("hello vue...");
    //             console.log("hello vue...");
    //             console.log("hello vue...");
    //         },2000)
    //     },2000)
    // },2000)


    /**
     * 利用 promise 进行改造
     * 
     * resolve: 网络请求成功时调用 
     * reject: 网络请求失败时调用
    */
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //resolve('hello world...')

            reject('appear error...')
        },2000)
    }).then( data =>{
        console.log(data)

        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
               resolve('hello js...')     
            },2000)
        })
    }).catch( err => {
        console.log(err);
    }).then(data =>{
        console.log(data);

        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('hello vue...')
            },2000)
        })
    }).then( data =>{
        console.log(data)
    })

</script>
</html>